<template>
  <a-slider
    id="time-slider-box"
    range
    :marks="marks"
    :value="defT"
    :step="null"
    :max="150"
    :tooltip-visible="false"
    @change="changeSliderHandler"
  />
</template>

<script>
import { debounce } from '@/utils/util';
export default {
  name: 'TimeRange',
  data() {
    return {
      defT: [],
      marks: {},
      pureTime: {}
    };
  },
  created() {
    this.initMarks();
    // setTimeout(() => {
    //   this.$moment
    // }, 6000);
  },

  methods: {
    initMarks() {
      let index = -1;
      // 跨度
      const step = 1 / 24;
      const arr = {};
      const defT = [];
      const nowDay0 = this.$moment
        .utc(new Date())
        .add(-16, 'hour')
        .set({ minute: 0, second: 0 })
        .format('MM-DD HH:mm');
      const nowDay23 = this.$moment
        .utc(new Date())
        .add(8, 'hour')
        .set({ minute: 0, second: 0 })
        .format('MM-DD HH:mm');
      const pureTime = {};

      while (Object.keys(arr).length <= 72) {
        const key = Math.round(50 + index * 50);
        const time = this.$moment
          .utc(new Date())
          .add(this.$np.times(index, 24) - 23, 'hour')
          .set({ minute: 0, second: 0 })
          .format('MM-DD HH:mm');
        if (key === 0 || key === 150) {
          const timeF = time.split(' ');
          arr[50 + index * 50] = (
            <div>
              <div class='fs-12'>{timeF[1]}</div>
              <div class='fw-b fs-12'>{timeF[0]}</div>
            </div>
          );
        } else {
          arr[50 + index * 50] = (
            <a-tooltip placement='top'>
              <template slot='title'>{time}</template>
              <span class='time-slider-place'></span>
            </a-tooltip>
          );
        }
        // 纯时间用来提供筛选
        pureTime[50 + index * 50] = this.$moment
          .utc(new Date())
          .add(this.$np.times(index, 24) - 23, 'hour')
          .set({ minute: 0, second: 0 })
          .format('YYYY-MM-DD HH:mm');
        // 默认区间
        if (time === nowDay0) {
          defT[0] = 50 + index * 50;
        }
        if (time === nowDay23) {
          defT[1] = 50 + index * 50;
        }
        index = this.$np.strip(index + step);
      }
      this.defT = defT;
      this.marks = arr;
      this.pureTime = pureTime;
    },
    changeSliderHandler(range) {
      // 点的个数
      const marksLength = Object.keys(this.marks).length;
      // slider长度
      const sliderW = 150;
      // 最少区间  最少点-1
      const minimumNumber = 4 - 1;
      if (range[1] - range[0] > (sliderW / marksLength) * minimumNumber) {
        this.defT = range;
      }
      // 防抖
      this.debounceRender();
    },
    // 防抖
    debounceRender: debounce(function() {
      this.$emit('timeBarRender');
    }, 650)
  }
};
</script>

<style lang="less">
#time-slider-box {
  .ant-slider-mark-text {
    white-space: nowrap;
    top: -12px;
  }
  .ant-slider-mark-text:first-child {
    top: 0px;
  }
  .ant-slider-mark-text:last-child {
    top: 0px;
  }
  .ant-slider-mark-text:nth-child(49) {
    top: 0px;
  }
  .ant-slider-track {
    top: 6px !important;
    z-index: 2 !important;
    height: 2px !important;
    background-color: @blue2!important;
  }
  .ant-slider-handle {
    width: 12px;
    height: 12px;
    border-radius: 100%;
    margin-top: -3px !important;
  }
  .ant-slider-dot {
    top: -1px !important;
    width: 2px !important;
    height: 5px !important;
    /* border: 2px solid #f0f0f0; */
    border-radius: 0 !important;
    border: none !important;
    background: #808080 !important;
  }
  .ant-slider-handle {
    z-index: 3;
  }
  .ant-slider-rail {
    left: -2px !important;
    bottom: 2px !important;
    height: 2px !important;
    top: 6px !important;
    background-color: #808080 !important;
  }

  .ant-slider-mark-text {
    line-height: 1;
  }
}
.time-slider-place {
  width: 7px;
  height: 7px;
  display: block;
}
</style>
